Page({
  data: {
    username: '',
    password: '',
    showSlider: false,
    sliderWidth: 0, // 百分比单位（控制背景宽度）
    sliderLeft: 0, // px单位（控制滑块位置）
    startX: 0,
    isDragging: false,
    sliderTip: '向右拖动滑块',
    isVerified: false,
    containerWidth: 0, // 滑块容器宽度（px）
    blockWidth: 60     // 滑块宽度（px，与CSS保持一致）
  },

  onLoad() {
    // 延迟获取容器宽度，确保DOM渲染完成
    setTimeout(() => {
      this.getSliderContainerWidth();
    }, 300);
  },

  // 获取滑块容器宽度（px）
  getSliderContainerWidth() {
    const query = wx.createSelectorQuery();
    query.select('.slider-outer').boundingClientRect(rect => {
      if (rect) {
        this.setData({
          containerWidth: rect.width
        });
      } else {
        // 重试机制，确保获取宽度
        setTimeout(() => this.getSliderContainerWidth(), 200);
      }
    }).exec();
  },

  // 用户名输入事件
  onUsernameInput(e) {
    this.setData({ username: e.detail.value });
    this.checkAndShowSlider();
  },

  // 密码输入事件
  onPasswordInput(e) {
    this.setData({ password: e.detail.value });
    this.checkAndShowSlider();
  },

  // 检查并显示滑块（用户名和密码都填写时显示）
  checkAndShowSlider() {
    const { username, password } = this.data;
    const shouldShow = !!username.trim() && !!password.trim();
    this.setData({ showSlider: shouldShow });
    if (shouldShow) {
      setTimeout(() => this.getSliderContainerWidth(), 100);
    }
  },

  // 触摸开始（记录初始位置）
  onSliderStart(e) {
    if (!this.data.containerWidth) return;
    this.setData({
      startX: e.touches[0].clientX,
      isDragging: true
    });
  },

  // 触摸移动（控制滑块位置和背景宽度）
  onSliderMove(e) {
    if (!this.data.isDragging || !this.data.containerWidth) return;

    const { startX, containerWidth, blockWidth } = this.data;
    const currentX = e.touches[0].clientX;
    const moveX = currentX - startX;

    // 计算最大可滑动距离（容器宽度 - 滑块宽度）
    const maxLeft = containerWidth - blockWidth;
    // 限制滑块在[0, maxLeft]范围内（不超出容器）
    let left = Math.max(0, Math.min(moveX, maxLeft));

    this.setData({
      sliderLeft: left,
      sliderWidth: (left / maxLeft) * 100, // 背景宽度百分比
      sliderTip: left >= maxLeft * 0.95 ? '松开完成验证' : '向右拖动滑块'
    });
  },

  // 触摸结束（验证是否通过）
  onSliderEnd() {
    if (!this.data.containerWidth) return;

    this.setData({ isDragging: false });
    const { containerWidth, blockWidth, sliderLeft } = this.data;
    const maxLeft = containerWidth - blockWidth;

    // 滑动到95%以上视为验证通过
    if (sliderLeft >= maxLeft * 0.95) {
      this.setData({
        sliderLeft: maxLeft, // 强制滑到最右侧
        sliderWidth: 100,
        sliderTip: '',
        isVerified: true
      });
    } else {
      // 未通过则重置
      this.setData({
        sliderLeft: 0,
        sliderWidth: 0,
        sliderTip: '验证失败，请重新拖动'
      });
    }
  },

  // 触摸被中断（如滑动中离开屏幕）
  onSliderCancel() {
    this.setData({ isDragging: false });
  },
// 跳转到注册页面
navigateToRegister() {
  wx.navigateTo({
    url: '/pages/zhuc/zhuc' 
  })
},
  // 登录方法
  login() {
    const { username, password } = this.data;

    wx.showLoading({ title: '登录中...' });
    wx.request({
      url: 'http://localhost:8080/user/login',
      method: 'POST',
      data: {
        username: username.trim(),
        password: password.trim()
      },
      header: { 
        'content-type': 'application/x-www-form-urlencoded' 
      },
      success: (res) => {
        wx.hideLoading();
        if (res.data.code === 200) {
          wx.showToast({ title: '登录成功', icon: 'success' });
          wx.setStorageSync('userInfo', res.data.data);
          setTimeout(() => wx.switchTab({ url: '/pages/zhuye/zhuye' }), 1000);
        } else {
          wx.showToast({ title: res.data.msg || '登录失败', icon: 'none' });
          this.resetSlider(); // 登录失败重置滑块
        }
      },
      fail: (err) => {
        wx.hideLoading();
        wx.showToast({ title: '接口连接失败', icon: 'none' });
        console.error('登录失败：', err);
        this.resetSlider(); // 接口失败重置滑块
      }
    });
  },

  // 重置滑块状态
  resetSlider() {
    this.setData({
      sliderLeft: 0,
      sliderWidth: 0,
      sliderTip: '向右拖动滑块',
      isVerified: false
    });
  }
});